﻿
#form1 {
    -webkit-user-drag: none;
    overflow: hidden;
}

html {
    font-family: sans-serif;
    -webkit-text-size-adjust: 100% !important;
    -ms-text-size-adjust: 100% !important;
}

.textboxWithCenteredText {
    text-align: center;
}

.new1 {
    width: 90vw !important;
}
hr.new1 {
    margin-top: -20px !important;
    margin-bottom: 10px !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    width: 100% !important;
}

#lblMsgTitle {
    /*    font-size: 18px;*/
    font-size: 1em;
}


body {
    -webkit-user-drag: none;
    overflow: hidden;
    background-color: black;
    /*Iphone 12 Pro and other small phones*/
    @media only screen and (min-width: 0px) and (max-width: 539px) {
        & {
            /*background-color: red;*/
        }
    }
    /*Surface Duo*/
    @media only screen and (min-width: 540px) and (max-width: 767px) {
        & {
           /* background-color: brown;*/
        }
    }
    /* Ipad Mini - Surface Pro 7*/
    @media only screen and (min-width: 768px) and (max-width: 912px) {
        & {
            /*background-color: yellow;*/
        }
    }
    /*Custom*/
    @media only screen and (min-width: 913px) and (max-width: 1023px) {
        & {
/*            background-color: mediumspringgreen;
*/        }
    }
    /*Ipad Pro*/
    @media only screen and (min-width: 1024px) and (max-width: 1365px) {
        & {
/*            background-color: blue;*/
        }
    }
    /*Monitors*/
    @media only screen and (min-width: 1366px) and (max-width: 1439px) {
        & {
/*            background-color: powderblue;
*/        }
    }

    @media only screen and (min-width: 1440px) and (max-width: 2048px) {
        & {
/*            background-color: sandybrown;
*/        }
    }

    @media only screen and (min-width: 2049px) and (max-width: 2735px) {
        & {
/*            background-color: burlywood;
*/        }
    }

    @media only screen and (min-width: 2736px) and (max-width: 9999px) {
        & {
/*            background-color: dimgray;
*/        }
    }
    /*Handle Height restrictions*/
    @media only screen and (min-height: 0px) and (max-height: 450px) {
        & {
/*            background-color: cadetblue;
*/        }
    }

    @media only screen and (min-height: 451px) and (max-height: 540px) {
        & {
/*            background-color: darkslateblue;
*/        }
    }

    @media only screen and (min-height: 541px) and (max-height: 800px) {
        & {
/*            background-color: firebrick;
*/        }
    }
}
    


#MsgRotate {
    visibility: hidden;
}


#topimage {
    /*width: 35vw;*/
    height: auto;
    aspect-ratio: 3/1;
    display: block;
    margin-left: auto;
    margin-right: auto;
    /*Handle Height restrictions*/
    /*IPhone SE Landscape*/
    @media only screen and (min-height: 0px) and (max-height: 450px) {
        & {
            max-width: 45vw;
        }
    }
    /*Surface Duo*/
    @media only screen and (min-height: 451px) and (max-height: 539px) {
        & {
            max-width: 22vw;
        }
    }

    @media only screen and (min-height: 540px) and (max-height: 600px) {
        & {
            max-width: 20vw;
        }
    }

    @media only screen and (min-height: 601px) and (max-height: 667px) {
        & {
            max-width: 20vw;
        }
    }

    @media only screen and (min-height: 668px) and (max-height: 900px) {
        & {
            max-width: 20vw;
        }
    }

    @media only screen and (min-height: 901px) and (max-height: 9999px) {
        & {
            max-width: 25vw;
        }
    }

    @media only screen and (min-width: 0px) and (max-width: 380px) {
        & {
            max-width: 65vw !important;
        }
    }
}


#imgMan1 {
    height: 30vh;
    width: auto;
    aspect-ratio: 1/1;
    display: block; /* Removes extra space below the image */
    margin-left: auto;
    margin-right: auto;

    /*IPhone SE Landscape*/
    @media only screen and (min-height: 0px) and (max-height: 450px) {
        & {
            max-height: 0vw;
            visibility: hidden;
        }
    }
    /*Surface Duo*/
    @media only screen and (min-height: 451px) and (max-height: 539px) {
        & {
            max-height: 22vw;
        }
    }

    @media only screen and (min-height: 540px) and (max-height: 600px) {
        & {
            max-height: 20vw;
        }
    }

    @media only screen and (min-height: 601px) and (max-height: 667px) {
        & {
            max-height: 20vw;
        }
    }

    @media only screen and (min-height: 668px) and (max-height: 900px) {
        & {
            max-height: 20vw;
        }
    }

    @media only screen and (min-width: 0px) and (max-width: 380px) {
        & {
            max-height: 420vw !important;
        }
    }
}


#loginrows {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
/*    background-color: yellow;
*/    font-size: .8em;
    position: relative;
    max-height: fit-content;

    @media only screen and (min-width: 0px) and (max-width: 539px) {
        & {
            width: 90%;
/*            background-color: darkslategrey;
*/        }
    }
    /*Surface Duo*/
    @media only screen and (min-width: 540px) and (max-width: 767px) {
        & {
            width: 50%;
/*            background-color: mediumpurple;
*/        }
    }
    /* Ipad Mini - Surface Pro 7*/
    @media only screen and (min-width: 768px) and (max-width: 912px) {
        & {
            width: 50%;
 /*           background-color: dimgray;*/
        }
    }
    /*Custom*/
    @media only screen and (min-width: 913px) and (max-width: 1023px) {
        & {
            width: 50%;
/*            background-color: sandybrown;
*/        }
    }
    /*Ipad Pro*/
    @media only screen and (min-width: 1024px) and (max-width: 1365px) {
        & {
            width: 50%;
/*            background-color: pink;
*/        }
    }
    /*Monitors*/
    @media only screen and (min-width: 1366px) and (max-width: 1439px) {
        & {
            width: 50%;
/*            background-color: paleturquoise;
*/        }
    }

    @media only screen and (min-width: 1440px) and (max-width: 2048px) {
        & {
            width: 25%;
/*            background-color: orangered;
*/        }
    }

    @media only screen and (min-width: 2049px) and (max-width: 2735px) {
        & {
            width: 50%;
            /*background-color: red;*/
        }
    }

    @media only screen and (min-width: 2736px) and (max-width: 9999px) {
        & {
            width: 25%;
/*            background-color: red;
*/        }
    }
    /*Handle Height restrictions*/
    /*IPhone SE Landscape*/
    @media only screen and (min-height: 0px) and (max-height: 450px) {
        & {
            height: 30vh !important;
        }
    }
    /* Surface Duo*/
    @media only screen and (min-height: 451px) and (max-height: 539px) {
        & {
            height: 30vh !important;

        }
    }

    @media only screen and (min-height: 540px) and (max-height: 600px) {
        & {
            height: 30vh !important;
        }      
    }

    @media only screen and (min-height: 601px) and (max-height: 900px) {
        & {
            /* Not Required*/
        }
    }
}


.LoginFields {
    height: 10vh;
    width: 100%;

    /*Handle Height restrictions*/
    /*IPhone SE Landscape*/
    @media only screen and (min-height: 0px) and (max-height: 450px) {
        & {
            height: 7vh !important;
        }
    }
    /* Surface Duo*/
    @media only screen and (min-height: 451px) and (max-height: 539px) {
        & {
            height: 7vh !important;
        }
    }

    @media only screen and (min-height: 540px) and (max-height: 600px) {
        & {
            height: 5.5vh !important;
        }
    }

    @media only screen and (min-height: 601px) and (max-height: 900px) {
        & {
/*            Max-width: 50% !important;*/
        }
    }

    @media only screen and (min-width: 1366px) and (max-width: 9999px){
        & {
/*            Max-width: 50% !important;*/
        }
    }
}

#dvStartBtn {
    text-align: center;
    font-size: 1.3em;
    margin-bottom: 10px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
/*    background-color: brown;
*/    display: block;
    height:auto;

    @media only screen and (min-width: 0px) and (max-width: 539px) {
        & {
            width: 90%;
/*            background-color: darkslategrey;
*/        }
    }
    /*Surface Duo*/
    @media only screen and (min-width: 540px) and (max-width: 767px) {
        & {
            width: 100%;
/*            background-color: mediumpurple;
*/        }
    }
    /* Ipad Mini - Surface Pro 7*/
    @media only screen and (min-width: 768px) and (max-width: 912px) {
        & {
            width: 50%;
/*            background-color: dimgray;
*/        }
    }
    /*Custom*/
    @media only screen and (min-width: 913px) and (max-width: 1023px) {
        & {
            width: 50%;
/*            background-color: sandybrown;
*/        }
    }
    /*Ipad Pro*/
    @media only screen and (min-width: 1024px) and (max-width: 1365px) {
        & {
            width: 50%;
/*            background-color: pink;
*/        }
    }
    /*Monitors*/
    @media only screen and (min-width: 1366px) and (max-width: 1439px) {
        & {
            width: 50%;
            /*background-color: fuchsia;*/
        }
    }

    @media only screen and (min-width: 1440px) and (max-width: 2048px) {
        & {
            width: 50%;
/*            background-color: red;
*/        }
    }

    @media only screen and (min-width: 2049px) and (max-width: 2735px) {
        & {
            width: 50%;
/*            background-color: red;
*/        }
    }

    @media only screen and (min-width: 2736px) and (max-width: 9999px) {
        & {
            width: 50%;
/*            background-color: red;
*/        }
    }
    /*Handle Height restrictions*/
    /*IPhone SE Landscape*/
    @media only screen and (min-height: 0px) and (max-height: 450px) {
        & {
            height: 30vh !important;
        }
    }
    /* Surface Duo*/
    @media only screen and (min-height: 451px) and (max-height: 539px) {
        & {
            height: 30vh !important;
        }
    }

    @media only screen and (min-height: 540px) and (max-height: 600px) {
        & {
            height: 30vh !important;
        }
    }

    @media only screen and (min-height: 601px) and (max-height: 900px) {
        & {
            /* Not Required*/
        }
    }
}

#imgStart1 {
    height: 30vh;
    width: auto;
    aspect-ratio: 1/1;
    display: block; /* Removes extra space below the image */
    margin-left: auto;
    margin-right: auto;
    margin-bottom:5px;

    /*Handle Height restrictions*/
    /*IPhone SE Landscape*/
    @media only screen and (min-height: 0px) and (max-height: 450px) {
        & {
            max-height: 15vh !important;
        }
    }
    /* Surface Duo*/
    @media only screen and (min-height: 451px) and (max-height: 539px) {
        & {
            max-height: 15vh !important;
        }
    }

    @media only screen and (min-height: 540px) and (max-height: 600px) {
        & {
            max-height: 15vh !important;
        }
    }

    @media only screen and (min-height: 601px) and (max-height: 9999px) {
        & {
            max-height: 13vh !important;
        }
    }
}

#rwNews {
    text-align: center;
    margin-bottom: 10px;
    color: white;
    /*background-color: pink !important;*/
    display: block;
    width:100%;

    /*Handle Height restrictions*/
    /*IPhone SE Landscape*/
    @media only screen and (min-height: 0px) and (max-height: 450px) {
        & {
            visibility: hidden;
            height: 0;
        }
    }
} /*The only need is to hide when small*/


#rwMsgTwo {
    text-align: center;
    color: white;
    /*background-color: purple !important;*/
    width: 100%;
    display: block;
    font-size: .8em;
    text-overflow: ellipsis;
    /*Handle Height restrictions*/
    /*IPhone SE Landscape*/
    @media only screen and (min-height: 0px) and (max-height: 667px) and (min-width: 0px) and (max-width: 450px) {
        & {
            visibility: hidden;
            height: 0;
        }
    }
}
/*The only need is to hide when small*/

#rwMsgOne {
    text-align: center;
    color: white;
/*    background-color: purple !important;
*/    width: 100%;
    display: block;
    font-size: .8em;
    text-overflow: ellipsis;
}


#dvBottom {
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100% !important;
    margin-right: 10px;
    /*Handle Height restrictions*/
    /*IPhone SE Landscape*/
    @media only screen and (min-height: 0px) and (max-height: 667px) and (min-width: 0px) and (max-width: 450px) {
        & {
            visibility: hidden;
            height: 0;
        }
    }
}
/*The only need is to hide when small*/


#lblContact {
    font-size: 1em;
    width: 99vw;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    /*Handle Height restrictions*/
    /*IPhone SE Landscape*/
    @media only screen and (min-height: 0px) and (max-height: 662px) {
        & {
            visibility: hidden;
        }
    }
}


#lblCopyright2 {
    font-size: 1em;
    width: 99vw;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    /*Handle Height restrictions*/
    /*IPhone SE Landscape*/
    @media only screen and (min-height: 0px) and (max-height: 608px) {
        & {
            visibility: hidden;
        }
    }
}

#lblCopyright {
    font-size: 1em;
    width: 99vw;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    /*Handle Height restrictions*/
    /*IPhone SE Landscape*/
    @media only screen and (min-height: 0px) and (max-height: 630px) {
        & {
            visibility: hidden;
        }
    }
}


footer {
    display: flex;
    justify-content: center; /* Centers items horizontally */
    align-items: center; /* Centers items vertically */
    text-align: center; /* Centers text inside items */

    @media only screen and (min-height: 0px) and (max-height: 450px) and (min-width: 0px) and (max-width: 450px) {
        & {
            /*background-color: plum;*/
            visibility: hidden;
            height: 0;
        }
    }
}



